import React from 'react'
import propsType from 'prop-types'
import { Button } from 'antd';
 class Home extends React.Component{
    static defaultProps={
        tltle:'我是props'
    }
    static propsType={
        title:propsType.string
        //需要npm i propsType 
        //可以设置类型  string/number/node/element/instanceOf()..
        //设置必选  isRequired
    }
    constructor(props){
       super()   //必须调用super()
       console.log('----初始化数据----（在获取props后）--第一步--111')
       this.state={
           num:10
       }
    }
    // componentWillMount(){
    //    旧的生命周期--------
    //     console.log('---挂载前--从服务端获取数据----第二部---22')
    // }
    // getDerivedStateFromProps(nextProps, prevState){
    //     //新的生命周期----替代了   componentWillMount和componentWillReceiveProps
    //    console.log(nextProps,'挂之前-----', prevState)
    // }
    render(){
        console.log('----渲染视图---第三部--333')
        return <div style={{border:'1px solid red'}}>
            <Button type="primary">安秀</Button>
            <p>类组件------及生命周期</p>
            <p>{this.state.num}-----{this.props.title}</p>
            <button onClick={()=>{this.setState({num: 200})}}>------点击我-------</button>
        </div>
    }
    componentDidMount(){
        console.log('---挂载后----第四部---444')
    }
    
    // componentWillReceiveProps(nextp){
    //   旧的-----------------------------
    //     console.log(nextp,'父组件传递的props发生改变')
    // }
    shouldComponentUpdate(pre,next){
        console.log(pre,'----数据发生改变----',next)
        //需放回boolean  
        //true-------数据更新后悔调用render 渲染视图
        //false-----数据更新  不会更新视图
        //常用与性能优化
        return true
    }
    // componentWillUpdate(){
    //   旧的
    //     console.log('数据更新前')
    // }
    getSnapshotBeforeUpdate(prevProps, prevState){
        console.log(prevProps,'---数据更新前---', prevState)
        return 45
    }
    componentDidUpdate(){
        console.log('---数据更新后-----')
    }

    componentWillUnmount(){
        console.log('----组件销毁-----')
    }

    
}

export default Home